<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="admin/head :: head"></div>

    <title>评价表单</title>
</head>
<body>
<div class="x-body layui-anim layui-anim-up">
    <form class="layui-form">
        <input type="hidden" name="id" th:value="${evaluate eq null ? '' : evaluate.id}"/>

        <div class="layui-form-item">
            <label for="L_targetType" class="layui-form-label">
                评价目标类型
            </label>
            <div class="layui-input-inline">
                <select class="layui-select" name="targetType" id="L_targetType" lay-verify="required" lay-filter="targetType">
                    <option value="">请选择</option>
                    <option value="4" th:selected="${evaluate ne null and evaluate.targetType eq 4}">摄影师</option>
                    <option value="5" th:selected="${evaluate ne null and evaluate.targetType eq 5}">编剧</option>
                    <option value="6" th:selected="${evaluate ne null and evaluate.targetType eq 6}">作品</option>
                </select>
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_target" class="layui-form-label">
                目标ID
            </label>
            <div class="layui-input-inline">
                <input type="text" id="L_target" name="target" required="" autocomplete="off" class="layui-input"
                       th:value="${evaluate eq null ? '' : evaluate.target}">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_anonymous" class="layui-form-label">
                是否匿名评价
            </label>
            <div class="layui-input-inline">
                <select class="layui-select" name="anonymous" id="L_anonymous" lay-verify="required">
                    <option value=0 th:selected="${evaluate ne null and evaluate.anonymous eq 0}">不匿名</option>
                    <option value=1 th:selected="${evaluate ne null and evaluate.anonymous eq 1}">匿名</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_user" class="layui-form-label">
                评价人ID
            </label>
            <div class="layui-input-inline">
                <input type="text" id="L_user" name="userId" required="" autocomplete="off" class="layui-input"
                       th:value="${evaluate eq null ? '' : evaluate.userId}">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_tag" class="layui-form-label">
                标签
            </label>
            <div class="layui-input-block" id="L_tag">
                <input th:each="item, index:${tagDicts}" type="checkbox" th:name="tags" th:title="${item.name}"
                       th:value="${item.value}"
                       th:checked="${evaluate.tagsSet ne null and evaluate.tagsSet.contains(item.value)}">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_score" class="layui-form-label">
                分数
            </label>
            <div class="layui-input-inline">
                <input type="number" min="1" max="5" id="L_score" name="score" required="" autocomplete="off"
                       class="layui-input" th:value="${evaluate eq null ? '' : evaluate.score}" placeholder="分数1-5">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_comment" class="layui-form-label">
                评价内容
            </label>
            <div class="layui-input-inline" style="width: 50%;">
                <textarea placeholder="评价内容为300个字之内" id="L_comment" name="comment" required="" class="text-area">[[${evaluate?.comment}]]</textarea>
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_reply" class="layui-form-label">
                管理员回复
            </label>
            <div class="layui-input-inline" style="width: 50%;">
                <textarea placeholder="回复内容为300个字之内" id="L_reply" name="reply" required="" class="text-area">[[${evaluate?.reply}]]</textarea>
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>

        <div class="layui-form-item">
            <button class="layui-btn" lay-filter="add" lay-submit="">
                保存
            </button>
        </div>
    </form>
</div>

<script>
    layui.use(['form', 'layer', 'upload'], function () {
        $ = layui.jquery;
        var form = layui.form;

        //自定义验证规则
        form.verify({});

        form.on('select(targetType)', function (data) {
            if (data == null || data == '') {
                return false;
            }
            var url = '';
            switch (parseInt(data.value)) {
                case 4:
                    url = '/dict/api/list/evaluate-script-writer-tags';
                    break;
                case 5:
                    url = '/dict/api/list/evaluate-photo-grapher-tags';
                    break;
                case 6:
                    url = '/dict/api/list/evaluate-production-tags';
                    break;
                default:
                    break;
            }
            $('#L_tag').children().remove()
            $.ajax({
                type: 'get',
                url: url,
                success: function (result) {
                    if (result.status == Messages.HTTP_STATUS.SUCCESS) {
                        for (var i in result.data) {
                            $('#L_tag').append('<input type="checkbox" name="tags" title="' + result.data[i].name + '" value="' + result.data[i].value + '">');
                        }
                    }
                    form.render();
                }
            })
        })

        //监听提交
        form.on('submit(add)', function (data) {
            data.field.tags = '';
            $('input[name="tags"]').each(function () {
                if ($(this).is(':checked')) {
                    data.field.tags += $(this).val() + ',';
                }

            })
            $.ajax({
                type: 'post',
                url: '/admin/evaluate/api/evaluate',
                data: data.field,
                dataType: 'json',
                beforeSend: function (xhr) {
                    xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
                },
                success: function (result) {
                    if (result.status == 200) {
                        layer.alert(Messages.SUCCESS, {icon: 6}, function () {
                            // get frame index
                            var index = parent.layer.getFrameIndex(window.name);
                            // refresh parent list and close current dialog
                            parent.location.reload();
                            parent.layer.close(index);
                        });
                    } else {
                        layer.alert(result.error == null || result.error == undefined ? Messages.ERROR : result.error, {icon: 1});
                        return false;
                    }
                },
                error: function (e) {
                    layer.alert(Messages.ERROR, {icon: 1});
                }
            })
            return false;
        });
    });
</script>

</body>
</html>